<template>
    <div class="edit-popup">
        <popup
            ref="popupRef"
            :title="popupTitle"
            :async="true"
            width="550px"
            @confirm="handleSubmit"
            @close="handleClose"
        >
            <el-form ref="formRef" :model="formData" label-width="84px" :rules="formRules">
                <!-- 账号输入框 -->
                <el-form-item label="手机号" prop="phone">
                    <el-input
                        v-model="formData.phone" 
                        maxlength="11"
                        placeholder="请输入手机号"
                        clearable
                    />
                </el-form-item>

  
                <!-- 名称输入框 -->
                <el-form-item label="密码" prop="password">
                    <el-input v-model="formData.password" type="password" placeholder="请输入密码" clearable />
                </el-form-item> 
            </el-form>
        </popup>
    </div>
  </template>
  <script setup> 
  import {onMounted, ref} from 'vue'
  import Popup from '@/components/popup/index.vue' 
  import { add} from '@/apis/user/user'

  const emit = defineEmits(['success', 'close'])
  const formRef = ref(null)
  const popupRef = ref(null)
  const mode = ref('add') 
  const popupTitle = computed(() => {
    return mode.value == 'edit' ? '编辑用户' : '新增用户'
  })
  const formData = reactive({
    id: '',
    phone: '',   
    type:0,
    password:''
  })

 
  const formRules = reactive({
    phone: [
        {
            required: true,
            message: '请输入手机号',
            trigger: ['blur']
        }
    ],
  })

  const handleSubmit = async () => {
    await formRef.value?.validate()
    if(mode.value == 'add'){
      delete formData.id
      await add(formData)
    }else{
      await edit(formData)
    }
    popupRef.value?.close()
    emit('success',formData.type)
  }
  
  const open = (type = 'add') => {
    mode.value = type
    popupRef.value?.open()
  }
  
 

  const setFormData = async (row) => { 
    formData.avatar = row.avatar
    const data = await getDetail({
        id: row.id
    })
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    } 
  }
  
  const handleClose = () => {
    emit('close')
  }
  
  defineExpose({
    open,
    setFormData
  })
  </script>
  
  
  <style scoped lang="scss">
    .avatar-uploader .avatar {
      width: 100px;
      height: 100px;
      display: block;
   }
   .avatar-uploader :deep() .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  
  .avatar-uploader :deep() .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  
  .el-icon.avatar-uploader-icon {
    font-size: 20px !important;
    color: #8c939d;
    width: 100px;
    height: 100px;
    text-align: center;
  }
  </style>